<template>
  <div class="centerBox flex_col">
    <!--     {{data}}-->
    <!-- {{minNum}}__ -->
    <div style="width: 100%;height: 40%;
    display: flex;
    flex-direction: row;">
      <div class="topBox flex_sb" v-if="data_top">
        <div :class="['li', 'flex_sb', item.value]" v-for="(item, index) in title_top" :key="index">
          <div class="flex_sb">
            <div class="title">{{ item.name }}</div>
            <div class="content">
              {{ data_top[item.value] }}
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="abBox">
      <div v-for="(item, index) in title" :key="index" :class="['li', 'flex_col', item.value,]">
        <div class="number">
        </div>
        <div class="title" style="position: relative">
          <span>{{ item.name }}</span>
          <span style="position: absolute;left: 50%;transform: translate(-50%,-100%);top: -20%">&ensp;
            <span style="font-size: 36px">{{ data ? data[item.value] : null }}</span>
            <span style="font-size: 16px">件</span>
          </span>&ensp;
        </div>
        <!-- //最小的一个为20px，其他的等比拉长 -->
        <!-- <div class="height" :style="{height:((data?data[item.value]:0)/(minNum==0?1:minNum))*40+'px'}"></div> -->
        <div class="height"
          :style="{ height: ((data ? (data[item.value] == 0 ? '60' : data[item.value] + 60) : 0) / 2) + 'px', 'max-height': '150px' }">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'centerBox',
  data() {
    return {
      minNum: 0
    }
  },
  props: {
    data: Object,
    data_top: Object,
    title: Array,
    title_top: Array
  },
  watch: {
    data(a) {
      console.log(a)
      this.getMIn()
    }
  },
  components: {
  },
  created() {
    this.getMIn()
  },
  mounted() {

  },
  methods: {
    getMIn() {
      if (this.data) {
        let ary = []
        this.title.forEach(e => {
          ary.push(this.data[e.value])
        });
        // console.log(ary,'ARY')
        this.minNum = Math.min(...ary)
      }

    },
    getHeight() {

    }
  }
}
</script>
<style scoped lang="postcss">
.centerBox {
  width: 100%;
  height: 100%;
  position: relative;
}

.topBox {
  flex: 1;


  align-content: flex-start;
  gap: 14px 0px;
  margin: 38px 5%;
  margin-bottom: 0;

  &>.li {
    height: 55px;
    width: 46%;
    background-size: 100% 100%;

    &>div {
      margin: 0 10%;
      flex: 1;
      align-items: flex-start;

      & .title {
        font-size: 16px;
        font-weight: 500;
        color: #AADDFF;
      }

      & .content {
        font-size: 30px;
        font-weight: 500;
        color: #FFB956;

        &>span {

          font-size: 14px;
          font-weight: 400;
        }
      }
    }

    &:nth-child(1) {
      background-image: url(@/assets/image/center/1@2x.png);
    }

    &:nth-child(2) {
      background-image: url(@/assets/image/center/2@2x.png);
    }

    &:nth-child(3) {
      padding: 15px 0px;
      background-image: url(@/assets/image/center/3@2x.png);
    }

    &:nth-child(4) {
      padding: 15px 0px;
      background-image: url(@/assets/image/center/4@2x.png);
    }

    &.electronFileCount {
      padding: 10px 0px;
      width: 459PX;

      &>div {
        align-items: center;

        &>.content {
          font-size: 40px;
          font-weight: 400;
          color: #77C8FF;
        }
      }
    }
  }
}






.abBox {
  width: 100%;
  flex: 1;

  position: relative;

  & .li {
    position: absolute;
  }

  & .number {
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;

    & span {
      font-size: 36px;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

  & .title {
    background: #07349B;
    border: 1px solid #4BBAF4;
    border-radius: 10px;
    padding: 13px 30px;
    font-size: 22px;
    font-weight: 500;
    color: #AADDFF;
    margin-top: 16px;
    margin-bottom: 7px;
  }

  & .height {
    width: 25px;
    height: 0px;
    max-height: 300px;
    transition: height 2s;
    background: linear-gradient(to bottom, #4FFFD7, 16%, #102E47FF, transparent);
    border-radius: 12px 12px 0px 0px;
  }
}

.li.flex_col.dqCount {
  left: 28%;
  bottom: 84%;

  &::after {
    content: "殿前"
  }
}

.li.flex_col.zmqCount {
  left: 15%;
  bottom: 68%;

  &::after {
    content: "自贸区"
  }
}

.li.flex_col.hsCount {
  left: 48%;
  bottom: 76%;

  &::after {
    content: "禾山"
  }
}

.li.flex_col.ybCount {
  left: 58%;
  bottom: 86%;

  &::after {
    content: "院部"
  }
}
</style>


<style>
/* .head{
background-image: url('../../assets/head.png');

  background-size: 100% 100%;
     width:100vw;
     height: 78px;
     color:red;
     font-family: Regular;
} */
</style>
